<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			background: #d4d8d8;
			height: 1000px;
		}
		
		ul,
		li {
			list-style: none;
		}
		
		#nav {
			width:100%;
			height: 80px;
			background: #06adbc;
			color: #fff;
			margin: 80px auto;
			line-height: 80px;
		}
		
		#nav p {
			width: 100px;
			height: 80px;
			float: left;
			line-height: 80px;
		}
		
		#nav span {
			height: 80px;
			display: block;
			float: left;
			line-height: 80px;
		}
		
		#box {
			display: none;
			width: 400px;
			height: 300px;
			border: 1px solid #000;
			position: absolute;
			left:400px;
			top:250px;
			
		}
		#uu{
			width:400px;
			background:#fff;
			height:40px;
		}
		#uu li {
			float: left;
			width:50px;
			height:40px;
			text-align: center;
			line-height: 40px;
		}
		#aa{
			position:absolute;
			right:10px;
			top:8px;
			background:#fff;
		}
		#div1{
			width: 400px;
			height: 260px;
			position:absolute;
			left:0;
			top:40px;
			background: #bff6fb;
		}
		#div1 form{
			margin-left:60px;
			margin-top:80px;
			display:none;
		}
		.active{
			background:#bff6fb;
		}
		#div1 #form1{
			display:block;
		}
		input{
			margin-bottom:10px;
		}
		#move{
			width:100px;
			height:30px;
			border:1px solid #000;
			position: absolute;
			left:0;
			top:-72px;
			text-align: center;
			line-height: 30px;
		}
	</style>

	<body>
		<div id="nav">
			<p>nav</p>
			<span id="s1">请先注册</span>
		</div>
		<div id="box">
			<ul id="uu">
				<li class="active">注册</li>
				<li>登录</li>
			</ul>
			<a id="aa" href="javascript:;">关闭</a>
			<div id="div1">
				<form id="form1" action="">
					邮箱：<input type="text" id="email"/>
					<span id="s2"></span><br> 密码：
					<input type="text" id="pwd"/>
					<span id="s3"></span><br>
					<input id="btn" type="button" value="注册" />
					<input id="res" type="button" value="重置" />
				</form>
				<form id="form2" action="suc.html" onsubmit="return getClick()">
					邮箱：<input id="txt1" type="text" /><span></span><br> 密码：
					<input id="txt2" type="text" /><span></span><br>
					<input type="submit" id="btn1" value="登录" />
				</form>
				<div id="move">拖拽区</div>
			</div>
		</div>
	</body>

</html>
<script>
	function $(id) {
		return document.getElementById(id);
	}
	
	//拖拽滚动条吸顶nav导航条效果
	var nav = $("nav");
	window.onscroll = function() {
		var height = 80;
		var sTop = document.body.scrollTop || document.documentElement.scrollTop;
		if(sTop > height) {
			nav.style.position = "fixed";
			nav.style.top = "0";
			nav.style.marginTop = "0";
		} else {
			nav.style.position = "";
			nav.style.marginTop = "80px";
		}
	}
	$("s1").onclick = function() {
		$("box").style.display = "block";
	}
	var list=$("uu").children;
	var oDiv=$("div1").children;
	for( var i=0;i<list.length;i++ ){
		list[i].index=i;
		list[i].onmouseover=function(){
			for( var j=0;j<list.length;j++ ){
				list[j].className="";
				oDiv[j].style.display="none";
			}
			this.className="active";
			oDiv[this.index].style.display="block";
		}
		
	}
	$("aa").onclick=function(){
		$("box").style.display="none";
	}
	
	//验证
	var reg1=/^\w+@\w+\.\w+$/;
	var reg2=/^.{6,}$/;
	
	var flagEmail=null;
	$("email").onblur=function(){
		if( reg1.test( $("email").value ) ){
			flagEmail=true;
			$("s2").innerHTML="正确";
		}else{
			flagEmail=false;
			$("s2").innerHTML="错误";
		}
	}
	var flagPwd=null;
	$("pwd").onblur=function(){
		if( reg2.test( $("pwd").value ) ){
			flagPwd=true;
			$("s3").innerHTML="正确";
		}else{
			flagPwd=false;
			$("s3").innerHTML="错误";
		}
	}
	//存储cookie
	$("btn").onclick=function(){
		if( flagEmail && flagPwd ){
			txt1=$("email").value;
			txt2=$("pwd").value;
			document.cookie="uname="+txt1;
			document.cookie="upwd="+txt2;
			alert("注册成功");
		}
	}
	
	$("res").onclick=function(){
		$("s2").innerHTML="";
		$("s3").innerHTML="";
		$("pwd").value="";
		$("email").value="";
	}
	

	function getClick(){
		
		if( uTxt1==txt1 && uTxt2==txt2 ){
			alert( "登陆成功" );
			return true;
		}else{
			alert( "登陆失败" );
			return false;
		}
	}
	
	//拖拽
	$("move").onmousedown=function(e){
		var e=e || event;
		var disx=e.offsetX;
		var disy=e.offsetY;
		document.onmousemove=function(e){
			var e=e || event;
			window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
			var x=e.pageX-disx;
			var y=e.pageY-disy;
			$("box").style.left=x+"px";
			$("box").style.top=y+30+"px";
		}
	}
	
	$("move").onmouseup=function(){
		document.onmousemove=null;
	}
	
</script>